<template>
  <div class="admin">
    <div class="left-bar">
      <router-link :to="{ name: 'AdminHome' }">Home</router-link>
      <router-link :to="{ name: 'AdminPosts' }">Posts</router-link>
      <router-link :to="{ name: 'AdminMenu' }">Menu</router-link>
      <router-link to="/">page3</router-link>
      <router-link to="/">page4</router-link>
      <router-link to="/">page5</router-link>
    </div>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: "Admin",
};
</script>

<style scoped lang="stylus">
.admin {
  display flex
  height calc(100vh - 60px)

  .left-bar {
    width 200px
    background #1da2f0

    a {
      display block
      height 50px
      line-height 50px
      padding-left 40px
      font-size 20px
      font-weight bold

      // 只是激活的状态
      //&.router-link-active {
      //  background red
      //}

      &.router-link-exact-active {
        background-color red
      }
    }
  }

  .content {
    background #ffba21
    flex 1
  }
}
</style>
<style lang="stylus">
.el-main {
  padding 0
}
</style>

<!--
http://localhost:8080/admin
http://localhost:8080/admin/posts
http://localhost:8080/admin/menu
http://localhost:8080/admin/banner
-->
